<template>
	<div @click.capture="log">
		<div class="option">
		<div class="optionItem" @click="open">文件
			<div class="menu" v-show="show">
				<div>
					新建
				</div>
				<div>
					打开文件
				</div>
				<div>
					打开文件夹
				</div>
			</div>
		</div>
	</div>
	<div class="view">
		<div class="list">
			<div v-if="list.length===0" class="notFolder">
				没有打开的文件夹
			</div>
			<router-link to="/edit/文章1" custom v-slot="{route}">{{route}}</router-link>
			<router-link to="/edit/文章2">文章2</router-link>
			<div @click="goPage('文章3')">文章3</div>
		</div>
		<div class="edit">
			<router-view></router-view>
		</div>
	</div>
	</div>
</template>

<script>
import {ref,reactive} from "vue"
import { useRouter, useRoute } from 'vue-router'
export default {
	setup(){
		const route=useRoute()
		const router=useRouter()
		const list=reactive([])
		const show=ref(false)
		function open(e){
			console.log("e:",e);
			show.value=!show.value
		}
		function log(e){
			if(e.target.className!=="optionItem"){

				show.value=false
			}
		}
		function goPage(page){
			router.push({name:"edit",params:{article:page},hash:"#aaa"})
		}
		return {
			list,
			open,
			show,
			log,
			goPage
		}
	}
}
</script>

<style scoped>
.option{
	width:100%;
	height: 2em;
	line-height: 2em;
	padding-left: 10px;
	background-color:#fff;
}
.view{
	height: calc( 100vh - 2em );
	display: flex;
	flex-direction: row;
}
.list{
	width:300px;
	background-color:#898989;
}
.edit{
	width: calc( 100vw - 300px );
	background-color:#061d47;
}
.notFolder{
	padding: 10px;
	color:#252525
}
.optionItem{
	position: relative;
}
.optionItem:active{
	text-decoration: underline;
}
.menu{
	position: absolute;
	top:2em;
	left:0;
	background-color: #fff;
	border: 1px solid #898989;
}
</style>